<template>
  <div>
    <el-table :data="owner" border style="width: 1090px;margin: auto;" class>
      <el-table-column prop="ownerId" label="业主ID" width="200"></el-table-column>
      <el-table-column prop="ownerName" label="业主姓名" width="120"></el-table-column>
      <el-table-column prop="ownerPhone" label="业主联系方式" width="150"></el-table-column>
      <el-table-column label="业主住房地址" width="200">
        <template
          slot-scope="scope"
        >
        <span v-show="!scope.row.ownerArea==null">{{scope.row.ownerArea}}区</span>{{scope.row.ownerDong}}栋{{scope.row.ownerUnit}}单元{{scope.row.ownerRoom}}室</template>
      </el-table-column>
      <el-table-column prop="ownerHome" label="业主住房面积/㎡" width="220"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row.ownerId)">详情</el-button>
          <el-button type="primary" @click="todelete(scope.row.ownerId)">删除</el-button>
          <el-dialog title="确认删除业主记录吗？" :visible.sync="centerDialogVisible" width="30%" center>
            <span>
              这意味着将所有有关该业主的信息全部删除！！！
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteById(pro_id)">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 0 auto; 
    width:750px;
    border-width:5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1 , 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      pro_id: "",
      owner: [
        {
          ownerId: "123", //aoto
          ownerName: "sss",
          ownerPhone: "13245678900",
          ownerHome: "ownerHome",
          ownerArea: "A",
          ownerDong: "1",
          ownerUnit: "1",
          ownerRoom: "101",
          manageCarId: "manageCarId",
          waterFId: "waterFId",
          eleFId: "eleFId",
          gasFId: "gasFId",
          propFId: "propFId"
        }
      ],
      page: {
        size: 10,
        current: 1,
        total: 5
      }
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      //分页的标记数，一页有多少数据。
      this.page.size = val;
      this.axios
        .post("owner/ownerpage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.owner = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`每页 ${val} 条`);
      console.log(val);
    },
    handleCurrentChange(val) {
      //当前是第几页
      this.page.current = val;
      this.axios
        .post("owner/ownerpage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.owner = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`当前页: ${val}`);
      console.log(val);
    },
    edit(row) {
      this.$router.push({
        //传参用router，接参用route
        path: "/index_manager/updataowner",
        query: {
          id: row
        }
      });
      console.log(row);
    },
    deleteById(row) {
      //进行删除操作，delete方法
      this.axios
        .post("owner/deleteowner?ownerId=" + row)
        .then(res => {
          console.log(res);
          if (res.data == "success") {
            this.$message({
              message: "已成功删除！！！",
              type: "warning"
            });
            window.location.reload();
          }
        })
        .catch(err => {
          console.error(err);
        });
      this.centerDialogVisible = false;
      console.log(row);
    },
    todelete(index) {
      this.centerDialogVisible = true;
      this.pro_id = index;
    }
  },
  created() {
    if (this.$route.query.keyword == null) {
      this.axios
        .post("owner/ownerpage", this.page)
        .then(res => {
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.owner = res.data.records;
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    } else {
      //查找
      this.axios
        .post(
          "owner/searchowner?keyword=" +
            this.$route.query.keyword
        )
        .then(res => {
          if (res.data[0] != null) {
            this.owner = res.data;
            console.log(res);
          } else {
            this.$alert("查无此人", "查找", {
              confirmButtonText: "确定",
              callback: action => {
                this.axios
                  .post("owner/ownerpage", this.page)
                  .then(res => {
                    this.page.total = res.data.total;
                    this.page.size = res.data.size;
                    this.page.current = res.data.current;
                    this.owner = res.data.records;
                  })
                  .catch(err => {
                    console.error(err);
                  });
              }
            });
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  components: {}
};
</script>

<style scope>
.showdiv {
  border: solid 1px #df1111;
}
</style>
